<template>
    <div class="app">
  <!-- 搜索栏 -->
  <!-- <div class="searchbox">
        <input type="text" placeholder="搜索商家、商品名称" v-model="searchText">
        <span @click="shopsearch">搜索</span>
    </div> -->
    <div class="block">
        <div class="title">
            <span>历史搜索</span>
            <van-icon name="delete" @click="deleteshop"/>
        </div>
        <div class="list">
            <span v-for="(item,index) in this.searchArr" :key="index" @click="shopenter(item)">{{item}}</span>
        </div>
    </div>
    <div class="block">
        <div class="title">搜索发现</div>
        <div class="list">
            <span v-for="(item,index) in this.searchArr" :key="index" @click="shopenter(item)">{{item}}</span>
        </div>
    </div>
</div>
</template>

<script>
import { mapState } from 'vuex'
import {shop_search} from '../../utils/api'
export default {
    data(){
        return {
            // searchText:"",
            // searchArr:[],
        }
    },
    computed:{
        ...mapState(['searchArr']),
    },
    methods:{
        shopenter(item){
            shop_search({searchkey:item}).then((res)=>{
            // shop_search({searchkey:this.searchArr.slice(-1)}).then((res)=>{
                // this.searchArr = res.data.list;
                this.$router.push('/search/result');
                this.$store.commit('render',res.data.list);
                // if(res.data.list.length == 0){
                //     Dialog({ message: '提示' });
                // }else{
                //     this.$store.commit('render',res.data.list);
                // }
                // console.log(this.searchArr.slice(-1));
                // console.log(res.data.list);
                this.searchText = "";
            })
        },
        deleteshop(){
            this.searchArr.splice(0,this.searchArr.length);
        }
    },
}
</script>

<style lang='scss' scoped>

.title {
    font-weight: bolder;
    padding: 10px 0 ;
    display: flex;
    justify-content: space-between;
}
.title .van-icon{

}
.block{
    margin-bottom: 30px;
    padding: 0 20px;
}
.block .list span {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 10px 10px; 
    border-radius:5px ;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>